<template>
  <div class="box">
    <h1 class="tc">Which one is true or false?</h1>
    <form class="tc search-form">
      <div>
        <input type="text" placeholder="请输入你关注的话题"/>
      </div>
      <button type="success">搜索</button>
    </form>
  </div>
</template>

<script>

  export default {
    name: "home",

  }
</script>

<style scoped>
  .box {
    padding-top: 80px;
    width: 100%;
    height: 500px;
    background-color: #008de1;
    position: absolute;
    top: 0;
    left: 0;
  }
  .box h1 {
    margin: 120px 0 63px;
    color: #fff;
  }
  .search-form {
    position: relative;
    height: 56px;
    font-size: 0;
  }

  .search-form>div {
    height: 100%;
    border: none;
    display: inline-block;
    width: 500px;
    overflow: hidden;
  }
  .search-form>div>input {
    height: 100%;
    border: none;
    outline: 0;
    display: inline-block;
    padding-left: 18px;
    width: 500px;
    font-size: 16px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .search-form button {
    vertical-align: text-bottom;
    width: 128px;
    border-radius: 0;
    padding: 0;
    line-height: 56px;
    font-size: 20px;
    background-color: #f74342;
    color: #fff;
    outline: 0;
    border: none;
    cursor: pointer;
  }
  .search-form button:hover {
    background-color: #e62625;
  }
</style>
